<!--舆情首页-->
<script setup>
import HomeCard from '@/views/home/components/HomeCard.vue'
import LineCharts from '@/components/Charts/LineCharts.vue'
import TimeSelect from '@/views/home/components/TimeSelect.vue'
import GirdItem from '@/views/home/components/GirdItem.vue'
import { formatCommas, formatNumber } from '@/utils/unit.js'
import { useRouter } from 'vue-router/composables'
import { roles } from '@/utils/config.js'
import { usePermissionStore } from '@/stores/permission'
import { useOderOverview } from '@/composables/useOderOverview.js'
import { getMonthStartToEnd, getStartEndTime } from '@/utils/date.js'
import TypeRatio from '@/views/home/components/TypeRatio.vue'
import { toAppToDoPage } from '@/utils/helper.js'
import ClickBox from '@/components/ClickBox.vue'
import InletItem from '@/views/home/components/InletItem.vue'
import { useOrderFromStore } from '@/stores/orderFrom.js'
const {
  overviewData,
  getHomeOverviewDataStaff,
  getHomeOverviewDataLeader,
  orderQueryLeader,
  orderQueryStaff,
  orderDisposeStaff,
  lineData,
  getHomeStatStatByDay,
  getHomeTotalData,
  totalSum,
  typeRatioList
} = useOderOverview()
const { user, isCreateRole } = usePermissionStore()
const { resetState } = useOrderFromStore()
const isStaff = computed(() =>
  [
    roles.provinceStaff,
    roles.cityStaff,
    roles.countryStaff,
    roles.officeStaff
  ].includes(user?.innerRoleCode || '')
)

const isLeader = computed(() =>
  [
    roles.provinceLeader,
    roles.cityLeader,
    roles.countryLeader,
    roles.officeLeader
  ].includes(user?.innerRoleCode || '')
)
const router = useRouter()

const state = reactive({
  show: false,
  title: '云南舆情指挥中心',
  showPopover: false,
  timeType: {
    label: '近一月',
    value: '近一月',
    ...getStartEndTime(-30, 0)
  },
  params: {
    createTimeStart: getMonthStartToEnd().startTime,
    createTimeEnd: getMonthStartToEnd().endTime,
    type: 'month'
  },
  refreshLoading: false
})

onBeforeMount(async () => {
  await initData()
  resetState()
})
const initData = async () => {
  await getHomeTotalData(state.params)
  if (isLeader.value) {
    await getHomeOverviewDataLeader(getStartEndTime())
    await getHomeStatStatByDay({
      createTimeEnd: state.timeType.endTime,
      createTimeStart: state.timeType.startTime,
      type: state.timeType.value
    })
  }
  if (isStaff.value) {
    await getHomeOverviewDataStaff(getStartEndTime())
  }
  state.refreshLoading = false
}
// goToPage
// 根据参数跳转页面
const goToPage = (key, prams) => {
  const page = {
    Statistics: '/statistics',
    WorkOrder: '/workOrder',
    WorkOrderForm: '/workOrder/form',
    Supervise: '/supervise',
    SuperviseFeedback: '/supervise/feedback'
  }
  if (key === 'appToDoPage') {
    toAppToDoPage(prams?.type)
  } else {
    if (prams) {
      router.push({
        path: page[key],
        query: {
          ...prams
        }
      })
    } else {
      router.push({
        path: page[key]
      })
    }
  }
}

watch(
  () => state.timeType,
  (newValue) => {
    if (isLeader.value) {
      getHomeStatStatByDay({
        createTimeEnd: newValue?.endTime,
        createTimeStart: newValue?.startTime,
        type: newValue?.value
      })
    }
  },
  { deep: true }
)
</script>

<template>
  <!--头部-->
  <div
    class="box-border overflow-x-hidden relative pb-50px bg-#F0F2F5 h-full overflow-y-auto"
  >
    <van-pull-refresh v-model="state.refreshLoading" @refresh="initData">
      <div class="relative pt-72px pb-20px h-auto">
        <!-- 头部标题 -->
        <div
          class="header absolute top-0 left-0 h-114px w-full flex items-center px-12px"
        >
          <span
            class="relative top--7px font-din text-20px font-600 leading-28px text-white tracking-0"
            >{{ user.orgName }}</span
          >
        </div>
        <!--  数据统计分析-->
        <div class="px-12px font-din">
          <div class="rounded-4px z-10 relative overflow-auto">
            <div
              class="box-border w-full h-36px bg-custom-2 flex items-center px-12px"
            >
              <span class="c-#1E2226 font-400 text-14px leading-20px"
                >数据统计概览</span
              >
            </div>
            <div
              class="bg-#FFFFFF h-136px border-1 border-white border-b-#EEEFF2 border-solid grid grid-cols-24 grid-rows-2"
            >
              <div
                class="pl-16px col-span-10 row-span-2 flex items-start justify-center flex-col border-r-1px border-r-solid border-#EEEFF2"
              >
                <p class="m-0 c-#1E2226 text-14px font-500 leading-20px">
                  本月累积舆情总数
                </p>
                <p
                  class="m-0 c-#71747A text-12px leading-28px flex w-full box-border items-center justify-center"
                >
                  <span
                    class="c-#1E2226 text-24px font-700 mr-2px letter-spacing-0.5px"
                  >
                    {{ formatNumber(totalSum).value || 0 }}
                  </span>
                  {{ formatNumber(totalSum).unit || '件' }}
                </p>
              </div>
              <div
                class="col-span-14 row-span-2 flex items-center flex-col justify-center pl-16px"
              >
                <TypeRatio
                  v-for="item in typeRatioList"
                  :key="item.label"
                  :bgc="item.color"
                  :label="item.label"
                  :value="item.value"
                />
              </div>
            </div>
            <ClickBox>
              <div
                class="bg-white h-40px flex items-center justify-center select-none"
                @click="goToPage('Statistics', '')"
              >
                <img
                  class="h-14px w-14px mr-4px"
                  src="@/assets/img/icon_wholeData.svg"
                  alt=""
                />
                <span class="c-#229F60 font-500 text-12px"
                  >查看完整统计分析</span
                >
                <img
                  class="h-14px w-14px"
                  src="@/assets/img/icon_DataArrow.svg"
                  alt=""
                />
              </div>
            </ClickBox>
          </div>
        </div>
        <!--  工单&督办 入口 -->
        <div class="px-12px" v-if="isStaff">
          <div
            class="h-57px select-none flex justify-between mt-8px bg-white rounded-4px"
          >
            <div
              v-if="isCreateRole"
              class="flex-1"
              @click="goToPage('WorkOrderForm', '')"
            >
              <InletItem title="工单录入" icon="ic-rec-yellow" line />
            </div>
            <div class="flex-1" @click="goToPage('Supervise', '')">
              <InletItem title="督办录入" icon="ic-rec-green" />
            </div>
          </div>
        </div>
        <!--  舆情走势  -->
        <HomeCard title="舆情走势" v-if="isLeader">
          <template #sub>
            <TimeSelect
              v-model="state.show"
              :type.sync="state.timeType"
            ></TimeSelect>
          </template>
          <template #default>
            <div class="bg-white rounded-4px py-2px">
              <LineCharts eid="home-yuqingzoushi" :data="lineData" />
            </div>
          </template>
        </HomeCard>
        <!-- 工单处理 -->
        <HomeCard v-if="isStaff" title="工单处理">
          <template #default>
            <div class="grid gap-9px grid-cols-2">
              <GirdItem
                v-for="item in orderDisposeStaff"
                :key="item.title"
                :title="item.title"
                :value="item.value"
                :url="item.url"
                @onTap="goToPage(item.url, item.query)"
              />
            </div>
          </template>
        </HomeCard>
        <!-- 工单查询 -->
        <HomeCard title="工单查询">
          <template #default>
            <div class="bg-white rounded-4px select-none">
              <div class="text-#1E2226 font-din p-12px pl-16px">
                <div class="text-16px font-500 leading-22px">累计工单总数</div>
                <div class="flex justify-between items-center pt-7px">
                  <div>
                    <span class="text-28px font-700 leading-34px">{{
                      formatCommas(overviewData.total)
                    }}</span>
                    <span
                      class="text-12px font-400 leading-17px text-#71747A pl-5px"
                    >
                      件
                    </span>
                  </div>
                  <div
                    class="flex items-center"
                    @click="goToPage('WorkOrder', '')"
                  >
                    <span class="text-#229F60 text-14px leading-20px font-din">
                      查看全部
                    </span>
                    <img
                      class="h-14px w-14px"
                      src="@/assets/img/icon_DataArrow.svg"
                      alt=""
                    />
                  </div>
                </div>
              </div>
              <div v-if="isLeader" class="grid gap-9px grid-cols-2 p-12px">
                <GirdItem
                  v-for="item in orderQueryLeader"
                  :key="item.title"
                  :title="item.title"
                  :value="item.value"
                  :url="item.url"
                  bg="gray"
                  @onTap="goToPage(item.url, item.query)"
                />
              </div>
              <div v-if="isStaff" class="grid gap-9px grid-cols-2 p-12px">
                <GirdItem
                  v-for="item in orderQueryStaff"
                  :key="item.title"
                  :title="item.title"
                  :value="item.value"
                  :url="item.url"
                  bg="gray"
                  @onTap="goToPage(item.url, item.query)"
                />
              </div>
            </div>
          </template>
        </HomeCard>
      </div>
    </van-pull-refresh>
  </div>
</template>

<style scoped lang="less">
.header {
  background-image: url('@/assets/img/bg-home-head.svg');
}
</style>
